<template>
  <div :class="[
    'ie-layout', {
      inverse: isInverse,
      mini: mq.mdMinus
    }]">

    <!-- HEADER -->
    <header class="ie-header">
      <div class="ie-container--fluid">
        <div class="ie-container">
          <router-link class="logo" to="/">
            <transition name="fade" mode="out-in">
              <img v-if="isInverse" src="/static/image/logo_w.png" alt="" key="0">
              <img v-else src="/static/image/logo.png" alt="" key="1">
            </transition>
          </router-link>
          <mq-responsive class="ie-pullright">
            <template #md+>
              <div class="navbar" ref="navbarRef">
                <router-link
                  v-for="item in navbarItems"
                  :to="{ name: item.to }"
                  :key="item.to"
                >{{ item.name }}</router-link>
                <div class="navbar__active" :style="navbarActiveStyle"></div>
              </div>
            </template>
            <template #md->
              <div class="navbar">
                <span :class="['handle', { visible }]" @click="visible = !visible"></span>
              </div>
            </template>
          </mq-responsive>
        </div>
      </div>
    </header>

    <!-- MAIN -->
    <main class="ie-main">
      <router-view
        @onepage:change="onepageChange"
        v-slot="{ Component }"
      >
        <transition name="fade" mode="out-in">
          <component class="page" :is="Component" />
        </transition>
      </router-view>

      <a-back-top />
    </main>

    <!-- FOOTER -->
    <ie-footer v-if="!isOnepage" />

    <!-- DRAWER CONTENT -->
    <div :class="['drawer', { visible }]">
      <div class="drawer-body">
        <transition name="fadeInLeft" mode="out-in">
          <div class="link" v-show="visible">
            <router-link
              v-for="item in navbarItems"
              :to="{ name: item.to }"
              :key="item.to"
            >{{ item.name }}</router-link>
          </div>
        </transition>
        <transition name="fade" mode="out-in">
          <div class="text" v-show="visible">
            <a href="mailto:yuchenzheng@yuzhoutech.com">yuchenzheng@yuzhoutech.com</a>
            <p>+86 18511008134</p>
            <p>北京语洲科技有限公司</p>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { useLoadingBar } from 'naive-ui'
import { useWindowScroll } from '@vueuse/core'
import { useMq } from 'vue3-mq'

import { loadingBarApiRef } from '/@/router'

const navbarItems = [
  { name: '首页', to: 'Index', inverse: true, onepage: true },
  { name: '解决方案', to: 'Solution' },
  { name: '合作案例', to: 'Case' },
  { name: '智慧场景', to: 'Scene' },
  { name: '了解语洲', to: 'About' },
]

const navbarRef = ref()
const navbarActiveStyle = ref({})
const navbarActive = ref(-1)

const route = useRoute()
const { y } = useWindowScroll()
const mq = useMq()

const visible = ref(false)
const isOnepageTop = ref(false)

function onepageChange(idx) {
  isOnepageTop.value = idx === 0
}

const isInverse = computed(() => {
  const currentRoute = navbarItems.find(v => route.name === v.to)
  return !visible.value && (currentRoute?.inverse && y.value === 0 && isOnepageTop.value)
})
const isOnepage = computed(() => {
  const currentRoute = navbarItems.find(v => route.name === v.to)
  return Boolean(currentRoute.onepage)
})

function renderNavbarActive(routeName) {
  nextTick(() => visible.value = false)
  if (!navbarRef.value) return
  routeName = routeName || route.name

  for (let i = 0; i < navbarItems.length; i += 1) {
    if (navbarItems[i].to === routeName) {
      const { x } = navbarRef.value.getBoundingClientRect()
      const items = navbarRef.value?.children || []

      if (items[i]) {
        const { width, x: toX } = items[i].getBoundingClientRect()

        navbarActiveStyle.value = {
          width: '18px',
          height: '3px',
          backgroundColor: isInverse.value ? '#FFFFFF' : '#2265E8',
          borderRadius: '2px',
          marginLeft: `${width / 2 - 9}px`,
          marginTop: '-24px',
          transform: `translateX(${toX - x}px)`,
          transition: 'all .3s cubic-bezier(.645,.045,.355,1)'
        }
        navbarActive.value = i + 1
      }
    }
  }
}

watch(
  () => route.name,
  renderNavbarActive, { immediate: true }
)

const loading = ref(true)
const loadingBar = useLoadingBar()

onMounted(() => {
  loading.value = false
  loadingBarApiRef.value = loadingBar
  loadingBar.finish()
  renderNavbarActive()
})
</script>

<style lang="less">
.ie-header {
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  transition: background-color .3s ease;

  .ie-container--fluid {
    box-shadow: 0 -2px 16px 0 rgba(0,0,0,0.06);
  }

  .ie-pullright {
    max-width: calc(100% - 100px);
  }

  .logo {
    height: 28px;
    display: inline-block;
    vertical-align: top;
    margin-top: 32px;
    margin-bottom: 32px;

    img {
      height: 100%;
      max-width: 100%;
    }
  }

  .navbar {
    height: 100px;
    margin-right: -25px;
    overflow: hidden;
    white-space: nowrap;

    a {
      color: #151515;
      display: inline-block;
      vertical-align: top;
      line-height: 100px;
      padding: 0 25px;
      transition: color .3s ease;
    }

    .router-link-exact-active {
      color: #000;
      font-weight: bold;
    }
  }

  .handle {
    margin-top: 40px;
    vertical-align: top;
  }
}

.ie-layout.inverse {

  .ie-header {
    background-color: transparent;

    .ie-container--fluid {
      box-shadow: none;
    }

    .navbar a {
      color: #FFF;
    }
  }

  .handle, .handle:before, .handle:after {
    background: #FFF;
  }
}

.ie-layout.mini {

  .ie-header {

    .logo {
      margin-top: 26px;
      margin-bottom: 26px;
    }

    .navbar {
      height: 80px;
      margin-right: 0;

      a {
        line-height: 80px;
      }
    }
  }
}

.drawer {
  position: fixed;
  top: 79px;
  background-color: #FFF;
  height: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all .3s cubic-bezier(.78,.14,.15,.86);
  overflow: hidden;

  &.visible {
    height: calc(100vh - 79px);
  }

  &-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 24px;

    .link {

      a {
        display: block;
        font-size: 18px;
        line-height: 2;
        border-bottom: 1px solid rgb(239,240,241);
        padding: 12px 0;
        position: relative;

        &:before {
          content: '';
          position: absolute;
          top: 50%;
          left: -24px;
          width: 0;
          height: 2px;
          display: block;
          background-color: #000;
          transition: width .3s ease-in-out;
        }
      }

      .router-link-exact-active {
        color: #000;
        font-weight: bold;

        &:before {
          width: 16px;
        }
      }
    }

    .text {

      p {
        color: #1A1D2D;
        font-size: 14px;
        line-height: 30px;
      }

      a {
        margin-top: 24px;
        color: #1A1D2D;
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        text-decoration: underline;
        display: block;
      }
    }
  }
}
</style>
